<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <u-navbar
      :title="title"
      @rightClick="goBack()"
      :autoBack="true"
      bgColor="transparent"
      leftIconColor="#ffffff"
    >
    </u-navbar>

    <!-- 底部背景色 -->
    <view
      class="indexbg"
      :style="{
        backgroundImage: 'url(' + $util.img('image/sanqi/pin_bg.png') + ')',
      }"
    ></view>

    <!-- 导航栏垫子悬空高度 -->
    <view :style="{ height: StatusBar + 45 + 'px' }"></view>

    <view class="titleCon rel m-b-30">
      <image :src="$util.img('image/sanqi/pin_title.png')" mode=""></image>
    </view>

    <view class="pinBox rel">
      <image
        :src="$util.img('image/sanqi/box_bg.png')"
        mode=""
        class="boxbg"
      ></image>
      <view style="height: 60rpx"></view>
      <view class="tuanBox rel" style="z-index: 5">
        <view class="font-32 font-weight-5 m-b-10" style="line-height: 1.4"
          >{{ groupDetail.sku_name }}
        </view>
        <view class="flex-y-center">
          <view
            class="nums"
            :style="{
              backgroundImage:
                'url(' + $util.img('image/sanqi/tuan_1.png') + ')',
            }"
            >{{ groupDetail.pintuan_num }}人团</view
          >
          <view class="limit radius-10 m-l-14"
            >已团{{ groupDetail.group_num }}次</view
          >
        </view>
        <view class="pics">
          <image
            :src="$util.img(groupDetail.sku_image)"
            mode="aspectFill"
            lazy-load
          ></image>
        </view>
        <view class="graybox flex-x-between">
          <view class="flex rel" style="align-items: baseline">
            <!-- <view class="sheng">已省{{ groupDetail.save_price }}元</view> -->
            <text class="font-36 c-origin text-bold"
              >¥{{ groupDetail.pintuan_price }}</text
            >
            <text class="font-24 c-9c yprice"
              >单价买:¥{{ groupDetail.discount_price }}</text
            >
          </view>
        </view>
      </view>
      <view style="background-color: #f8f7fa; height: 50rpx"></view>
    </view>

    <view class="flex-center pin_title">
      <image :src="$util.img('image/sanqi/pin_xian.png')" mode=""></image>
    </view>

    <!-- 开团成功 -->
    <view class="boxPanel" style="margin-top: -30rpx">
      <block v-if="groupDetail.timeMachine">
        <view class="text-bold flex-center m-b-20 m-t-30"
          >{{ groupDetail.pintuan_num }}人团还差
          <text class="color-title2">{{ kill }}</text> 人，快去邀请好友吧</view
        >
        <view class="time flex-center">
          <text class="m-r-10">剩余</text>
          <uni-count-down
            :day="groupDetail.timeMachine.d"
            :hour="groupDetail.timeMachine.h"
            :minute="groupDetail.timeMachine.i"
            :second="groupDetail.timeMachine.s"
            color="#fff"
            splitorColor="#FF8F33"
            backgroundColor="#FF8F33"
            borderColor="transparent"
          />
          <text class="m-l-10">结束</text>
        </view>
      </block>
      <block class="flex-center" v-else><text>活动已结束</text></block>
      <view class="group m-t-60 m-b-60">
        <view class="flex">
          <view
            class="avatar"
            v-for="(item, index) in groupDetail.member_list"
            :key="index"
            v-if="index < 5"
          >
            <image
              :src="
                item.member_img
                  ? $util.img(item.member_img)
                  : $util.img('/upload/uniapp/default_headimg.png')
              "
              mode="aspectFill"
              lazy-load
            ></image>
            <view class="level" v-if="groupDetail.head_id == item.member_id"
              >团长</view
            >
          </view>
        </view>
        <text class="m-l-34 m-r-34">:</text>
        <view class="duo">
          <image
            :src="
              groupDetail.member_list && groupDetail.member_list.length < 5
                ? $util.img('/upload/uniapp/spelling_who.png')
                : $util.img('/upload/uniapp/spelling_who_omit.png')
            "
            mode="aspectFill"
            lazy-load
          ></image>
        </view>
      </view>
      <!-- <block v-if="groupDetail.timeMachine"> -->
      <button class="pin_btn" open-type="share">邀请好友参团</button>
      <!-- </block> -->
    </view>

    <!-- 拼团完成 -->
    <!-- <view class="boxpanel m-l-30 m-r-30 m-b-30" style="margin-top: -30rpx;" v-if="pin_status==1">
       <view class="m-b-20 success">
         <image src="../../static/pin_success.png" mode=""></image>
         <view class="font-32 text-bold">拼团成功</view>
       </view>
       <view class="group m-t-60 m-b-60">
         <view class="avatar">
           <image src="../../static/avatar.png" mode=""></image>
           <view class="level">团长</view>
         </view>
         <text class="m-l-34 m-r-34">:</text>
         <view class="duo">
           <image src="../../static/avatar.png" mode="" v-for="i in 4"></image>
         </view>
       </view>
       <view class="pin_btn">查看订单</view>
     </view> -->
    <!-- 拼团失败 -->
    <!-- <view class="boxpanel m-l-30 m-r-30 m-b-30" style="margin-top: -30rpx;" v-if="pin_status==2">
      <view class="m-b-20 success">
        <image src="../../static/pin_fail.png" mode=""></image>
        <view class="font-32 text-bold m-b-22">拼团失败</view>
        <view class="c-5e">差价过期未补，拼团自动失败</view>
      </view>
      <view class="pin_btn">重新开团</view>
    </view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      StatusBar: getApp().globalData.StatusBar,
      timeData: {},
      pin_status: 2,
      title: "",
      id: 0,
      groupDetail: {
        sku_image: "",
      },
      kill: 0,
      memberId: 0,
    };
  },
  onLoad(e) {
    this.id = e.id;
    this.getGroupDetail();
    this.getMemberId();
  },
  methods: {
    goBack() {
      // 判断路由是否有上一页，如果有则返回上一页，否则返回到首页
      if (getCurrentPages().length > 1) {
        uni.navigateBack();
      } else {
        this.$util.redirectTo("/pages/index/index");
      }
    },
    getGroupDetail() {
      this.$api.sendRequest({
        url: "/pintuan/api/order/detail",
        data: {
          id: this.id,
        },
        success: (res) => {
          if (res.code == 0) {
            res.data.member_list;
            let newArr = [];
            for (
              let i = 0;
              i < res.data.pintuan_num - res.data.member_list.length;
              i++
            ) {
              let str = "";
              newArr.push(str);
            }
            this.kill = res.data.pintuan_num - res.data.pintuan_count;
            res.data.member_list = res.data.member_list.concat(newArr);
            if (res.data.group_end_time > res.timestamp) {
              res.data.timeMachine = this.$util.countDown(
                res.data.group_end_time - res.timestamp
              );
            } else {
              res.data.timeMachine = null;
            }
            this.groupDetail = res.data;

            this.groupDetail.member_list = this.groupDetail.member_list.filter(
              function (item, index) {
                return item;
              }
            );
          } else {
            this.$util.showToast({
              title: res.message,
            });
          }
        },
      });
    },
    getMemberId() {
      this.$api.sendRequest({
        url: "/api/member/id",
        success: (res) => {
          if (res.code >= 0) {
            this.memberId = res.data;
          }
        },
      });
    },
  },
  /**
   * 自定义分享内容
   * @param {Object} res
   */
  onShareAppMessage(res) {
    var path =
      "/otherpages/mall/pinOrderDetail?pintuan_id=" +
      this.groupDetail.pintuan_id +
      "&group_id=" +
      this.groupDetail.group_id;
    if (this.memberId) path += "&source_member=" + this.memberId;
    return {
      title:
        "还差" +
        (this.groupDetail.pintuan_num - this.groupDetail.pintuan_count) +
        "人拼团成功，" +
        this.groupDetail.sku_name,
      imageUrl: this.$util.img(this.groupDetail.sku_image, {
        size: "big",
      }),
      path: path,
      success: (res) => {},
      fail: (res) => {},
    };
  },
};
</script>

<style lang="scss" scoped>
.indexbg {
  position: absolute;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 903rpx;
}
.titleCon {
  display: flex;
  justify-content: center;
  align-items: center;
  image {
    width: 576rpx;
    height: 56rpx;
  }
}

.pinBox {
  position: relative;
  // background-position: 100% 100%;
  // background-repeat: no-repeat;
  // background-size: cover;
  width: 750rpx;
  // height: 733rpx;
  box-sizing: border-box;
  padding-bottom: 50rpx;
  // background-color: #f8f7fa;
  .boxbg {
    position: absolute;
    width: 750rpx;
    height: 100%;
    z-index: 1;
  }
}

// 图像组
.group {
  display: flex;
  align-items: center;
  justify-content: center;
  .avatar {
    position: relative;
    width: 85rpx;
    height: 85rpx;
    margin-left: 10rpx;

    image {
      width: 85rpx;
      height: 85rpx;
      border-radius: 50%;
    }

    .level {
      position: absolute;
      bottom: -28rpx;
      left: 0;
      margin-left: 11rpx;
      background-color: #413427;
      border-radius: 10rpx;
      font-size: 20rpx;
      color: #fff;
      font-weight: bold;
      padding: 3rpx 10rpx;
    }
  }
  .duo {
    display: flex;
    image {
      width: 85rpx;
      height: 85rpx;
      border-radius: 50%;
      margin-right: 32rpx;
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
.pin_share_btn {
  width: 621rpx;
  height: 151rpx;
}
.pin_title {
  width: 100%;
  height: 92rpx;
  margin-top: -80rpx;
  position: relative;
  z-index: 9;
  image {
    width: 635rpx;
    height: 92rpx;
  }
}

.success {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  image {
    width: 108rpx;
    height: 107rpx;
    margin-bottom: 20rpx;
  }
}
.pin_btn {
  width: 600rpx;
  height: 96rpx;
  line-height: 96rpx;
  text-align: center;
  background-color: $color-title2;
  color: #fff;
  border-radius: 60rpx;
  margin-top: 100rpx;
  margin-bottom: 30rpx;
}

.tuanBox {
  width: 637rpx;
  padding: 12rpx;
  background: #fff;
  margin: 0 auto;
  border-radius: 20rpx;
  box-sizing: border-box;
  .nums {
    width: 144rpx;
    height: 36rpx;
    font-size: 24rpx;
    color: #ff3a45;
    // padding-left: 40rpx;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    text-align: right;
    padding-right: 20rpx;
  }
  .limit {
    font-size: 20rpx;
    color: $color-title2;
    padding: 2rpx 10rpx;
    border: 1px solid $color-title2;
    display: inline-block;
  }
  .pics {
    display: flex;
    flex-wrap: nowrap;
    justify-content: start;
    margin: 24rpx 0;
    image {
      width: 200rpx;
      height: 200rpx;
      border-radius: 20rpx;
      margin-right: 20rpx;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .graybox {
    border-radius: 20rpx;
    background-color: #f7f7f7;
    padding: 40rpx 34rpx 14rpx;
    .yprice {
      //   text-decoration: line-through;
      margin-left: 10rpx;
    }
    .sheng {
      position: absolute;
      left: 0;
      bottom: 60rpx;
      width: 130rpx;
      //   height: 27rpx;
      border-radius: 20rpx 20rpx 20rpx 0;
      background: #fc2743;
      color: #fff;
      font-size: 20rpx;
      text-align: center;
      padding: 0 10rpx;
    }
    .buy {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 133rpx;
      height: 55rpx;
      background: linear-gradient(90deg, #fa4147 0%, #fe6625 100%);
      border-radius: 60rpx;
    }
  }
}
</style>
